<template>
  <div>
    <van-nav-bar fixed>
      <template #left>
        <div style="color: red">编辑</div>
      </template>
    </van-nav-bar>
    <div class="boX"></div>
    <div class="Cart_zheng">
      <div v-for="(item, index) in cart" :key="index" class="Cart_box">
        <div class="Cart_checkbox">
           <van-checkbox  v-model="item.checked"  class="van-checkbox" @click="Onlick(item)"/>
        </div>
        <van-card
          class="Cart"
          :num="item.num"
          :price="item.originalPrice"
          :desc="item.characteristic"
          :title="item.name"
          :thumb="item.pic"
        >
          <template #footer>
            <van-button size="mini" @click="del(index)">删除</van-button>
          </template>
        </van-card>
      </div>
    </div>
    <van-submit-bar
      :price="this.$store.getters.totalPrice"
      button-text="提交订单"
      v-show="Show"
      class="Cart_btber"
      @submit="Onclick"
   
    >
      <van-checkbox >全选</van-checkbox>
    </van-submit-bar>

    <van-empty
      class="custom-image"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      description="买点喜欢的东西吧"
      v-show="isShow"

    />
    <van-divider>猜你喜欢</van-divider>
  </div>
</template>
<script>
export default {
  data() {
    return {

    };
  },
  computed: {
    cart: function () {
      return this.$store.state.Cart.cart;
    },
    isShow() {
      let show = this.cart.length > 0 ? false : true;
      return show;
    },
    Show() {
      let show = this.cart.length > 0 ? true : false;
      return show;
    },
    
  },
  methods: {
    del(index) {
      this.$store.dispatch("Cartdel", index);
    },
    Onlick(item){
     this.$store.dispatch("Cartchecked", item);
    },
    Onclick(){
      this.$router.push({
       path:"/Order"
      })
    }
  },
};
</script>
<style scoped>
.boX {
  width: 100%;
  height: 3rem;
}
.Cart_box {
  display: flex;
  width: 100%;
  height: 7rem;
}
.Cart_checkbox {
  width: 20%;
  height: 5rem;
  line-height: 5rem;
}
.Cart {
  width: 140%;
}
.custom-image {
  width: 100%;
  height: 90px;
  margin-bottom: 5rem;
}
.Cart_zheng {
  widows: 100%;
  height: 20rem;
}
.Cart_btber {
  width: 100%;
  height: 3rem;
  position: fixed;
  bottom: 3.6rem;
  line-height: 3rem;
  left: 0;
  background: floralwhite;
}
.Cart_btber_left {
  float: right;
}

.van-checkbox{
  margin-top: 1.5rem;
}
</style>